<template>
    <div class="map-editor">
        <div class="left-tiles shadow">
            <div class="tile-info" style="padding:20px;text-align:left;">
                <div>地形： {{currentTile.name}}</div>
                <div>海：{{currentTile.ocean}}</div>
                <div>陆：{{currentTile.land}}</div>
                <div>空：{{currentTile.air}}</div>
            </div>
            <div class="tile-list">
                <ul>
                    <li 
                        v-for="tile in allTiles" 
                        :key="tile.id"
                        @click="setCurrentTile(tile)"
                        :class="{current:currentTile === tile}"
                        >
                        <img :src="tile.src" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-editors full-screen">
            <div class="editor-funs shadow">
                <f-button>创建地图</f-button>
                <f-button>修改地图</f-button>
            </div>
            <div class="paint-contaner shadow">
                <canvas ref="canvas"></canvas>
            </div>
        </div>
    </div>
</template>
<script>
import http from '../../http/http.js'
import { reactive,onMounted,toRefs,ref } from 'vue'
import FButton from '../../components/common/FButton.vue'

export default {
  components: { FButton },
    setup() {
        
        const canvas = ref(null)
        let context = null;
        const state = reactive({
            allTiles: [],
            currentTile:'',
            context: ''
        })
        onMounted(async ()=>{
            const {data} = await http.get('/api/map/getAllMapTile')
            state.allTiles = data
            state.currentTile = data[0]
            context = canvas.value.getContext('2d')
        })

        const setCurrentTile = (tile)=>{
            state.currentTile = tile
        }

        return {
            ...toRefs(state),
            setCurrentTile,
            canvas
        }
    }
}
</script>
<style>
.map-editor {
    display: flex;
    justify-content: space-between;
}
.left-tiles {
    width: 170px;
    padding: 4px;
}
.current {
    animation: current 1s infinite alternate;
}
@keyframes current {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1.2);
    }
}
.tile-list ul {
    display: flex;
    flex-wrap: wrap;
}
.tile-list li {
    margin-right: 2px;
}
.tile-list li:nth-child(5n){
    margin-right: 0;
}
.right-editors {
    width: calc(100% - 200px)
}
.editor-funs {
    min-height: 100px;
    padding: 10px;
}
.paint-contaner {
    margin-top: 20px;
    min-height: calc(50vh);
    max-height: 100vh;
    padding: 10px;
}

</style>